<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>ITLibrary</title>
	<link rel="stylesheet" href="layui/css/layui.css">
</head>

<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">
		<div class="layui-header">
			<div class="layui-logo">ITLibrary</div>
			<!-- 头部区域（可配合layui已有的水平导航） -->
			<ul class="layui-nav layui-layout-left">
				<li class="layui-nav-item layui-this"><a href="">首页</a></li>
			</ul>
			<#if !user??>
				<ul id="login-menu" class="layui-nav layui-layout-right">

					<li class="layui-nav-item">
						<a href="javascript:void(0);" onclick="openLogin()">
							<i class="layui-icon layui-icon-username"></i> 登录
						</a>
					</li>
					<li class="layui-nav-item">
						<a href="javascript:void(0);" onclick="openRegister()">
							<i class="layui-icon layui-icon-auz"></i> 注册
						</a>
					</li>
				</ul>
			</#if>


			<ul id="user-menu" class="layui-nav layui-layout-right ${(user??)?string('','layui-hide')}">
				<li class="layui-nav-item">
					<a href="/borrow">我的借阅<span class="layui-badge">0</span></a>
				</li>
			</ul>
		</div>

		<div class="layui-side layui-bg-black">
			<div class="layui-side-scroll">
				<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
				<ul class="layui-nav layui-nav-tree"  lay-filter="test">
					<li class="layui-nav-item ${(cid==0)?string('layui-this','')}" style="text-align:center">
						<a href="/allBook?cid=0">所有分类</a>
					</li>

					<#list  cateGory as c>
						<li class="layui-nav-item ${(c.cid==cid)?string("layui-this","")}" style="text-align:center"><a href="/allBook?cid=${c.cid}">${c.name}</a></li>

					</#list>
				</ul>
			</div>
		</div>

		<!-- 内容主体区域 -->
		<div class="layui-body">
			<form action="/allBook?cid=${cid}" method="post" class="layui-form" style="padding:20px 20px 5px 35px">
				<div class="layui-inline">
					<label class="layui-input-label">图书名称：</label>
					<div class="layui-input-inline" style="width: 150px;">
						<input type="text" name="bookName" style="height:30px" autocomplete="off" class="layui-input" value="${bookName}">
					</div>
				</div>

				<div class="layui-inline" style="padding-left:20px">
					<label class="layui-input-label">图书作者：</label>
					<div class="layui-input-inline" style="width: 150px;">
						<input type="text" name="authorName" style="height:30px" autocomplete="off" class="layui-input" value="${authorName}">
					</div>
				</div>

				<div class="layui-inline" style="padding-left:20px">
					<button class="layui-btn layui-btn-radius layui-btn-primary layui-btn-sm" lay-submit>
						<i class="layui-icon layui-icon-search"></i>搜索图书
					</button>
				</div>
			</form>

			<hr>

			<div align="center">
				<#list book.dataList as a>
				<#--行首-->
					<#if a_index % 4 == 0>
						<div class="layui-row layui-col-space1" style="padding-top:20px">
					</#if>

					<div class="layui-col-md3">
						<img src="/img/book01.jpg" style="width:200px;height:200px">
						<div style="padding:10px 20px 5px 35px" align="left">
							<p>书名:${a.name}</p>
							<p>作者:
								<#list a.author as b>
									${b.name}
								</#list>
							</p>
							<p>
								剩余：<span style="color:red">${a.surplusBook?size}</span>&nbsp;&nbsp; 总数：
								<span style="color:red">${a.book?size}</span>
							</p>
						</div>
						<button type="button" onclick="go(${a.fid})" class="layui-btn layui-btn-radius layui-btn-sm layui-btn-primary">
							<i class="layui-icon layui-icon-cart-simple" ></i>借阅
						</button>
					</div>

				<#--行尾-->
					<#if a_index % 4 == 3|| a_has_next == false>
						</div>
					</#if>
				</#list>
			</div>

			<div id="pagination" align="center" style="padding:20px 0px 20px 0px"></div>
		</div>

		<!-- 底部固定区域 -->
		<div class="layui-footer" style="text-align:center">
			©www.jwkt.net 版权所有
		</div>

		<!-- 登录表单 -->
		<div id="login-layer" style="display: none">
			<form id="login-form" class="layui-form" style="padding:45px 20px 5px 20px">
				<div class="layui-form-item">
					<label class="layui-form-label">登录名</label>
					<div class="layui-input-block">
						<input type="text" name="username" class="layui-input" id="username" style="width:80%">
					</div>
					<div id="login-msg-1" class="layui-hide">
						<label class="layui-form-label" style="color:red">错　误</label>
						<div id="login-txt-1" class="layui-form-mid layui-word-aux">辅助文字</div>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">密　码</label>
					<div class="layui-input-block">
						<input type="password" name="password" class="layui-input" style="width:80%">
					</div>
					<div id="login-msg-2" class="layui-hide">
						<label class="layui-form-label" style="color:red">错　误</label>
						<div id="login-txt-2" class="layui-form-mid layui-word-aux">辅助文字</div>
					</div>
				</div>
			</form>
		</div>
		<!-- 注册表单 -->
		<div id="register-layer" style="display: none">
			<form id="register-form" class="layui-form" style="padding:45px 20px 5px 20px">
				<div class="layui-form-item">
					<label class="layui-form-label">登录名</label>
					<div class="layui-input-block">
						<input type="text" name="username" class="layui-input" id="username" style="width:80%">
					</div>
					<div id="register-msg-1" class="layui-hide">
						<label class="layui-form-label" style="color:red">错　误</label>
						<div  id="register-txt-1" class="layui-form-mid layui-word-aux">辅助文字</div>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">密　码</label>
					<div class="layui-input-block">
						<input type="text" name="password" class="layui-input" style="width:80%">
					</div>
					<div id="register-msg-2" class="layui-hide">
						<label class="layui-form-label" style="color:red">错　误</label>
						<div  id="register-txt-2" class="layui-form-mid layui-word-aux">辅助文字</div>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">姓　名</label>
					<div class="layui-input-block">
						<input type="text" name="name" class="layui-input" style="width:80%">
					</div>
					<div id="register-msg-3" class="layui-hide">
						<label class="layui-form-label" style="color:red">错　误</label>
						<div  id="register-txt-3" class="layui-form-mid layui-word-aux">辅助文字</div>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">电　话</label>
					<div class="layui-input-block">
						<input type="text" name="phone" class="layui-input" style="width:80%">
					</div>
					<div id="register-msg-4" class="layui-hide">
						<label class="layui-form-label" style="color:red">错　误</label>
						<div  id="register-txt-4" class="layui-form-mid layui-word-aux">辅助文字</div>
					</div>
				</div>

			</form>
		</div>
	</div>
	<script src="/layui/js/jquery.min.js"></script>
	<script src="/layui/layui.js"></script>
	<script>
	//JavaScript代码区域
	layui.use(['element', 'form', 'laypage', 'layer'], function(){
		var element = layui.element,
			laypage = layui.laypage,
			form = layui.form,
			layer = layui.layer;

		laypage.render({
			elem: 'pagination',
			count: ${book.rowCount},
			limit: ${book.pageSize},
			curr: ${book.pageNum},
			jump: function(obj, first){   //跳转(obj-页面参数，first-是否第一次调用)
				if(!first){
					location.href="/allBook?pageNum=" + obj.curr;
				}
			}
		});
	});
	function openLogin() {
		layer.open({
			type: 1,
			title: "用户登录",
			area: ['500px', '270px'],
			btnAlign: 'c',
			btn: ['登录', '取消'],
			yes: function(index, layero){
				userLogin(index);
				layer.style(index, {height: "300px"});
			},
			btn2: function(index, layero){
				return true;
			},
			content: $("#login-layer")
		});
	}
	function openRegister() {
		layer.open({
			type: 1,
			title: "用户注册",
			area: ['500px', '420px'],
			btnAlign: 'c',
			btn: ['注册', '取消'],
			yes: function(index, layero){
				userRegister(index);

			},
			btn2: function(index, layero){
				return true;
			},
			content: $("#register-layer")
		});
	}
	function userLogin(index) {
		$.ajax({
			url: '/user_login',
			type: 'post',
			data: $("#login-form").serialize(),
			dataType: "json",
			success: function (data) {

				if (data.success < 0) {
					$("#login-txt"+data.success).text(data.message);
                         if(data.success==-1){
							 $("#login-msg-1").removeClass("layui-hide");
							 $("#login-msg-2").addClass("layui-hide");
						 }else{
							 $("#login-msg-2").removeClass("layui-hide");
							 $("#login-msg-1").addClass("layui-hide");
							 }

				}else{
                     $("#user-menu").removeClass("layui-hide");
                     $("#login-menu").addClass("layui-hide");
					layer.close(index);
				}
			},
			error: function(error){    //失败后回调
				alert("服务器连接失败");
			}
		});
	}
	function userRegister(index) {
		$.ajax({
			url: '/user_register',
			type: 'post',
			data: $("#register-form").serialize(),
			dataType: "json",
			success: function (data) {

				if (data.success < 0) {
					for(var i = -1; i >= -4; i--) {
						if (data.success == i) {
							$("#register-msg" + i).removeClass("layui-hide");
						}
						else {
							$("#register-msg" + i).addClass("layui-hide");
						}
					}

					$("#register-txt" + data.success).text(data.message);

					layer.style(index, {height: "460px"});
				}
				else {
					layer.msg(data.message);

					layer.close(index);
				}
			},
			error: function(error){    //失败后回调
				alert("服务器连接失败");
			}
		});
	}

	function go(fid) {
		$.ajax({
			url: '/aaa?fid='+fid,
			type: 'post',
			dataType: "json",
			success: function (data) {
                   layer.msg(data.message)
			},
			error: function(error){    //失败后回调
				alert("服务器连接失败");
			}
		});
	}


	</script>


</body>



</html>
